<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="光伏用户" name="first">

            <el-row :gutter="20">
              <el-col :span="10" >

                <el-input
                  placeholder="请输入销纳比"
                  v-model="rateNum"
                  size="small"
                  clearable>
                </el-input>
              </el-col>
              <el-col :span="10">
                <el-button type="primary" @click="submitData()">提交</el-button>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-upload
                  drag
                  action
                  accept='.xlsx'
                  :auto-upload='false'
                  :on-change='exportPowerExcel'
                  :show-file-list='true'
                  :headers="headers"
                >
                  <el-button type="primary" size="small">导入用户负荷</el-button>
                </el-upload>
              </el-col>
              <el-col :span="6">
                <el-upload
                  drag
                  action
                  multiple
                  accept='.xlsx'
                  :auto-upload='false'
                  :on-change='exportRateExcel'
                  :show-file-list='true'
                  :headers="headers"
                >
                  <el-button type="primary" size="small">导入发电系数</el-button>
                </el-upload>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="startAnalyse">开始分析</el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="resetImportCustData">重置用户负荷数据</el-button>
              </el-col>
            </el-row>
            <el-row r="20">
              <el-col :span="6">
                <el-tag type="danger">用户负荷一次最多导入500户</el-tag>
              </el-col>
              <el-col :span="6">
                <el-tag type="danger">请按照模板导入</el-tag>
              </el-col>
              <el-col :span="6">
                <el-tag type="danger">负荷和发电系数导入完成后开始分析，预计10分钟后自动导出</el-tag>
              </el-col>
              <el-col :span="4">
                <el-tag type="danger">重新分析新数据需重置用户负荷</el-tag>
              </el-col>
            </el-row>

    </el-tab-pane>
    <el-tab-pane label="储能用户" name="second">

      <el-row :span="20">
        <el-col :span="6">
          开始时间
        </el-col>
        <el-col :span="6">
          结束时间
        </el-col>
        <el-col :span="6">
          时段
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value1" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value2" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">谷</el-tag>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value3" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value4" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions4"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">平段1</el-tag>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value5" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions5"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value6" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions6"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">峰段1</el-tag>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value7" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions7"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value8" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions8"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">平段2</el-tag>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value9" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions9"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value10" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions10"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">峰段2</el-tag>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-select v-model="value11" clearable placeholder="开始时间">
            <el-option
              v-for="item in timeOptions11"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value12" clearable placeholder="结束时间">
            <el-option
              v-for="item in timeOptions12"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-tag type="info">平段3</el-tag>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="submitTimeData()">提交</el-button>
        </el-col>
      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入有效天数"
            v-model="validDay"
            size="small"
            clearable>
          </el-input>
        </el-col>

      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入储能功率"
            v-model="installedCapacityP"
            size="small"
            clearable>
          </el-input>
        </el-col>

      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入二次放电消纳率"
            v-model="secondDayDischargeAbsorbRate"
            size="small"
            clearable>
          </el-input>
        </el-col>

      </el-row>
      <el-row :span="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入变压器负载率"
            v-model="transformerLoadRate"
            size="small"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="submitSetData()">提交</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="capacityData()">容量计费客户数据分析</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="demandData()">需量计费客户数据分析</el-button>
        </el-col>
      </el-row>

    </el-tab-pane>
  </el-tabs>

</template>

<script>
  import {
    importCoefficient,
    importCustLoadPage,
    analysis,
    resetCustLoad,
    configAbsorbRate,
    configSystemTimeInterval,
    config
  } from "../api/analysis";


  export default {
    name: 'Index',

    data() {

      return {
        url:'',
        rateNum: '',
        validDay:'',
        installedCapacityP:'',
        secondDayDischargeAbsorbRate:'',
        transformerLoadRate:'',
        activeName: 'first',
        headers: {"Content-Type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},

        tableData: [],
        dialogVisible: false,
        timeOptions1: [],
        timeOptions2: [],
        timeOptions3: [],
        timeOptions4: [],
        timeOptions5: [],
        timeOptions6: [],
        timeOptions7: [],
        timeOptions8: [],
        timeOptions9: [],
        timeOptions10: [],
        timeOptions11: [],
        timeOptions12: [],
        initOpts: [
          {
            value: '01:00',
            label: '01:00'
          }, {
            value: '02:00',
            label: '02:00'
          }, {
            value: '03:00',
            label: '03:00'
          }, {
            value: '04:00',
            label: '04:00'
          }, {
            value: '05:00',
            label: '05:00'
          }, {
            value: '06:00',
            label: '06:00'
          }, {
            value: '07:00',
            label: '07:00'
          }, {
            value: '08:00',
            label: '08:00'
          }, {
            value: '09:00',
            label: '09:00'
          }, {
            value: '10:00',
            label: '10:00'
          }, {
            value: '11:00',
            label: '11:00'
          }, {
            value: '12:00',
            label: '12:00'
          }, {
            value: '13:00',
            label: '13:00'
          }, {
            value: '14:00',
            label: '14:00'
          }, {
            value: '14:00',
            label: '14:00'
          }, {
            value: '16:00',
            label: '16:00'
          }, {
            value: '17:00',
            label: '17:00'
          }, {
            value: '18:00',
            label: '18:00'
          }, {
            value: '19:00',
            label: '19:00'
          }, {
            value: '20:00',
            label: '20:00'
          }, {
            value: '21:00',
            label: '21:00'
          }, {
            value: '22:00',
            label: '22:00'
          }, {
            value: '23:00',
            label: '23:00'
          }, {
            value: '24:00',
            label: '24:00'
          }
        ],
        value1: '00:00',
        value2: '08:00',
        value3: '08:00',
        value4: '11:00',
        value5: '11:00',
        value6: '17:00',
        value7: '17:00',
        value8: '20:00',
        value9: '20:00',
        value10: '22:00',
        value11: '22:00',
        value12: '24:00',
        timeMaps: []
      }
    },
    mounted() {
      this.timeOptions1 = this.initOpts;
      this.timeOptions2 = this.initOpts;
      this.timeOptions3 = this.initOpts;
      this.timeOptions4 = this.initOpts;
      this.timeOptions5 = this.initOpts;
      this.timeOptions6 = this.initOpts;
      this.timeOptions7 = this.initOpts;
      this.timeOptions8 = this.initOpts;
      this.timeOptions9 = this.initOpts;
      this.timeOptions10 = this.initOpts;
      this.timeOptions11 = this.initOpts;
      this.timeOptions12 = this.initOpts;
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      /**
       *导入系数
       * @param file
       */
      exportRateExcel(file) {
        let formData = new FormData();
        formData.append("file", file.raw);
        importCoefficient(formData).then(result => {
          console.log("系数导入结果:" + result.data);
        }).catch(e => {
          console.log(e);
        })
      },

      /**
       *导入负荷数据
       * @param file
       */
      exportPowerExcel(file) {
        let formData = new FormData();
        formData.append("file", file.raw);
        importCustLoadPage(formData).then(result => {
          console.log("负荷导入结果:" + result.data);
        }).catch(e => {
          console.log(e);
        })
      },

      /**
       * 输入框提交
       */
      submitData() {
        const rateMap = {};
        rateMap.configName = "TRANSFORMER_LOAD_RATE";
        rateMap.configValue =  this.rateNum;
        config(rateMap).then(result => {
          console.log("发电系数输入结果:" + result.data);
        }).catch(e => {
          console.log(e);
        });
      },
      async startAnalyse() {
        const res = await this.$http.get("http://localhost:18080/data/analysis/photovoltaic");
        console.log("输出：" + res.data)
      },

      resetImportCustData() {
        resetCustLoad().then(result => {
          console.log("重置结果:" + result.data);
        }).catch(e => {
          console.log(e);
        })
      },

      submitTimeData() {
        const timeMap1 = {};
        timeMap1.startTime = this.value1;
        timeMap1.endTime = this.value2;
        timeMap1.timeIntervalCode = "trough";
        this.timeMaps.push(timeMap1);
        const timeMap2 = {};
        timeMap2.startTime = this.value3;
        timeMap2.endTime = this.value4;
        timeMap2.timeIntervalCode = "flat1";
        this.timeMaps.push(timeMap2);
        const timeMap3 = {};
        timeMap3.startTime = this.value5;
        timeMap3.endTime = this.value6;
        timeMap3.timeIntervalCode = "peak1";
        this.timeMaps.push(timeMap3);
        const timeMap4 = {};
        timeMap4.startTime = this.value7;
        timeMap4.endTime = this.value8;
        timeMap4.timeIntervalCode = "flat2";
        this.timeMaps.push(timeMap4);
        const timeMap5 = {};
        timeMap5.startTime = this.value9;
        timeMap5.endTime = this.value10;
        timeMap5.timeIntervalCode = "peak2";
        this.timeMaps.push(timeMap5);
        const timeMap6 = {};
        timeMap6.startTime = this.value11;
        timeMap6.endTime = this.value12;
        timeMap6.timeIntervalCode = "flat3";
        this.timeMaps.push(timeMap6);
        configSystemTimeInterval(this.timeMaps).then(result => {
          console.log("预设时段:" + result.data);
        }).catch(e => {
          console.log(e);
        })
      },
      submitSetData(){
        const validDayConfigMap = {};
        validDayConfigMap.configName = "VALID_DAYS";
        validDayConfigMap.configValue =  this.validDay;
        const installCapacityPConfigMap = {};
        installCapacityPConfigMap.configName = "INSTALLED_CAPACITY_P";
        installCapacityPConfigMap.configValue =  this.installedCapacityP;
        const secondDischargeAbsorbRateConfigMap = {};
        secondDischargeAbsorbRateConfigMap.configName = "SECONDARY_DISCHARGE_ABSORB_RATE";
        secondDischargeAbsorbRateConfigMap.configValue =  this.secondDayDischargeAbsorbRate;
        const transformerLoadRateConfigMap = {};
        transformerLoadRateConfigMap.configName = "TRANSFORMER_LOAD_RATE";
        transformerLoadRateConfigMap.configValue =  this.transformerLoadRate;
        config(validDayConfigMap).then(result => {
          console.log("有效天数结果:" + result.data);
        }).catch(e => {
          console.log(e);
        });
        config(installCapacityPConfigMap).then(result => {
          console.log("预期装机规模结果:" + result.data);
        }).catch(e => {
          console.log(e);
        });
        config(secondDischargeAbsorbRateConfigMap).then(result => {
          console.log("二次放电消纳率结果:" + result.data);
        }).catch(e => {
          console.log(e);
        });
        config(transformerLoadRateConfigMap).then(result => {
          console.log("变压器负载率结果:" + result.data);
        }).catch(e => {
          console.log(e);
        })
      },

      async capacityData(){
        const res = await this.$http.get("http://localhost:18080/data/analysis/stored/capacity");
        alert("分析后自动下载容量客户数据到本地");
        console.log("输出：" + res.data)
      },
      async demandData(){
        const res = await this.$http.get("http://localhost:18080/data/analysis/stored/demand");
        alert("分析后自动下载需量客户数据到本地");
        console.log("输出：" + res.data)
      }

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-row {
    margin-bottom: 20px;

  }
  .el-col {
    border-radius: 4px;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
</style>
